<template>
  <div id="children_container" style="height: 98%">
    <!-- 卡片视图区域 -->
    <el-card style="background-color: #efefef">
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12" class="col">
          <div class="bgccol3" style="position: relative">
            <span style="position: relative; left: 11px">
              <i class="iconfont icon-rili1"></i>
              &nbsp;&nbsp;&nbsp;個人用予定表
            </span>
            <span style="float: right; margin-right: 10px">
              <el-button type="primary" size="mini" @click="dialogFormVisible = true" style="margin-right: 10px; padding-left: 5px; padding-right: 5px" icon="el-icon-plus">新しい予定 </el-button>
            </span>
          </div>
        </el-col>
        <el-col :span="6" class="col3">
          <div class="bgccol3" style="position: relative">
            <span style="position: relative; left: 11px">
              <i class="iconfont icon-huiyi1"></i>
              &nbsp;&nbsp;&nbsp;会議予定
            </span>
            <span style="position: absolute; right: 13px" @click="mySearch">
              <i class="el-icon-s-grid" style="font-size: 15px; cursor: pointer"></i>
            </span>
          </div>
        </el-col>
        <el-col :span="6" class="col3">
          <div class="bgccol3" style="position: relative">
            <span style="position: relative; left: 11px">
              <i class="iconfont icon-gonggao1"></i>
              &nbsp;&nbsp;&nbsp;お知らせ
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12" class="col1">
          <!-- 日历 -->
          <!-- <el-calendar id="calender">
            <template #dateCell="{ data }">
              <div :class="data.isSelected ? 'is-selected' : ''">

                {{ parseInt(data.day.split('-').slice(2).join('-')) }}
                <br />
                <div v-for="(item, index) in dealMyDate(data.day)" :key="index" style="width: 150px; height: 20px">
                  <p :class="item.surgent == '1' ? 'is-common' : item.surgent == '2' ? 'is-success' : 'is-danger'" @click="calItem(data.day, index)" style="width: 150px">
                    {{ item.stTittle }}
                  </p>
                  <br />
                </div>
              </div>
            </template>
          </el-calendar> -->
          <FullCalendar ref="fullCalendar" class="fullCaldarSet" :options="calendarOptions"> </FullCalendar>
        </el-col>
        <el-col :span="6" class="col2">
          <!-- <div style="width:100%;background:white;height:333px">
              <el-empty :image-size="200"></el-empty>
           </div> -->
          <div class="col2Height" v-if="falgVisitedList.length == 0">
            <el-empty></el-empty>
          </div>
          <div class="col2Height" v-if="falgVisitedList.length != 0">
            <div v-for="(item, index) in falgVisitedList" :key="index">
              <p v-if="index < 5">
                [{{ item.mrName }}]{{ item.mtittle }}
                <br />
                <br />
                {{ item.mbTime.slice(11, 19) }}～{{ item.meTime.slice(11, 19) }}
                <br />
                <br />
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="col2">
          <div class="col2Height1" v-if="title == ''">
            <el-empty></el-empty>
          </div>
          <div class="col2Height1">
            <text-area v-if="title != ''">
              <br />
              <p style="text-align: center; color: gray; font-size: 16px">
                <b>{{ title }}</b>
              </p>
              <br />
              <br />
              <br />
              <p v-html="notice"></p>
            </text-area>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 日历日程弹出框 -->
    <el-dialog title="日程詳細" v-model="dialogVisible" width="35%" :before-close="handleClose">
      <div style="width: 100%; height: auto">
        <table class="mytable" cellpadding="0" cellspacing="0">
          <tr class="mytr">
            <td class="mytd">日程類別</td>
            <td class="mytd1">
              {{ editForm.stTittle }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">日程テーマ</td>
            <td class="mytd1">
              {{ editForm.stittle }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">日程内容</td>
            <td class="mytd1">
              {{ editForm.scontent }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">日程場所</td>
            <td class="mytd1">
              {{ editForm.saddress }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">発起人</td>
            <td class="mytd1">
              <el-button style="background-color: #009688; color: #ffffff; margin-bottom: 5px; margin-top: 5px">
                {{ $store.getters.showId }}
              </el-button>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">緊急程度</td>
            <td class="mytd1">
              {{ editForm.surgent }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">開始時間</td>
            <td class="mytd1">
              {{ editForm.sbtime }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">終了時間</td>
            <td class="mytd1">{{ editForm.setime }}</td>
          </tr>
          <tr class="mytr">
            <td class="mytd">リマインドの方式</td>
            <td class="mytd1" v-if="editForm.sremindType == '1'">しない</td>
            <td class="mytd1" v-if="editForm.sremindType == '2'">メッセージ</td>
            <td class="mytd1" v-if="editForm.sremindType == '3'">メール</td>
          </tr>
          <tr class="mytr" v-if="editForm.sremindType == '2'">
            <td class="mytd">リマインド時間</td>
            <td class="mytd1" v-if="editForm.sremindTime == '0'">さっそく</td>
            <td class="mytd1" v-if="editForm.sremindTime == '1'">15分前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '2'">30分前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '3'">1時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '4'">2時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '5'">3時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '6'">6時間前に</td>
          </tr>
          <tr class="mytr" v-if="editForm.sremindType == '3'">
            <td class="mytd">リマインド時間</td>
            <td class="mytd1" v-if="editForm.sremindTime == '0'">さっそく</td>
            <td class="mytd1" v-if="editForm.sremindTime == '1'">15分前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '2'">30分前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '3'">1時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '4'">2時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '5'">3時間前に</td>
            <td class="mytd1" v-if="editForm.sremindTime == '6'">6時間前に</td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="日程新規" v-model="dialogFormVisible" @close="resetForm('Form')">
      <el-form :model="Form" :rules="rules" ref="Form">
        <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
          <!-- <el-input v-model="myschedule.groupEnterpriseGuid" autocomplete="off" disabled="ture"></el-input> -->
          <el-select v-model="Form.groupEnterpriseGuid" placeholder=" " class="dialog_detail">
            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日程の類別" prop="stId" :label-width="formLabelWidth">
          <el-select v-model="Form.stId" placeholder=" " class="dialog_detail">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日程のテーマ" prop="stittle" :label-width="formLabelWidth">
          <el-input v-model="Form.stittle" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
        </el-form-item>
        <el-form-item label="日程の内容" prop="scontent" :label-width="formLabelWidth">
          <el-input v-model="Form.scontent" type="textarea" autosize autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
        </el-form-item>
        <el-form-item label="日程の場所" prop="saddress" :label-width="formLabelWidth">
          <el-input v-model="Form.saddress" autocomplete="off" placeholder=" " class="dialog_detail"></el-input>
        </el-form-item>
        <el-form-item label="緊急程度" prop="surgent" :label-width="formLabelWidth">
          <el-select v-model="Form.surgent" class="dialog_detail" placeholder=" ">
            <el-option label="普通" value="1"></el-option>
            <el-option label="重要" value="2"></el-option>
            <el-option label="緊急" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="開始期日" prop="sbdate" :label-width="formLabelWidth" style="float: left">
          <el-date-picker v-model="Form.sbdate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
        </el-form-item>
        <el-form-item id="timewidth" label="時間" prop="sbtime" label-width="100px">
          <el-time-picker v-model="Form.sbtime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
        </el-form-item>
        <el-form-item label="終了期日" prop="sedate" :label-width="formLabelWidth" style="float: left">
          <el-date-picker v-model="Form.sedate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder=" " class="dialog_detail1"> </el-date-picker>
        </el-form-item>
        <el-form-item id="timewidth" label="時間" prop="setime" label-width="100px">
          <el-time-picker v-model="Form.setime" value-format="HH:mm:ss" format="HH:mm:ss" placeholder=" " class="dialog_detail1"> </el-time-picker>
        </el-form-item>
        <el-form-item label="リマインド方式" prop="sremindType" :label-width="formLabelWidth">
          <el-select v-model="Form.sremindType" class="dialog_detail">
            <el-option label="しない" value="1"></el-option>
            <el-option label="メッセージ" value="2"></el-option>
            <el-option label="メール" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="Form.sremindType != '1'" label="リマインド時間" prop="sremindTime" :label-width="formLabelWidth">
          <el-select v-model="Form.sremindTime" class="dialog_detail" placeholder=" ">
            <el-option label="さっそく" value="0"></el-option>
            <el-option label="15分前に" value="1"></el-option>
            <el-option label="30分前に" value="2"></el-option>
            <el-option label="1時間前に" value="3"></el-option>
            <el-option label="2時間前に" value="4"></el-option>
            <el-option label="3時間前に" value="5"></el-option>
            <el-option label="6時間前に" value="6"></el-option>
          </el-select>
        </el-form-item>
        <!-- 另一种写法，要有一个变量，noClick:true -->
        <!-- <el-button type="primary" icon="el-icon-circle-check" @click="$noMulClicks(submitmyschedule)" class="save">保存</el-button> -->
        <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="submitForm()" class="save">保存 </el-button>
      </el-form>
    </el-dialog>

    <!-- 待參加會議彈出框 -->
    <el-dialog title="参加予定会議" v-model="visitedDialogVisible" custom-class="joinmeeting" :before-close="handleClose">
      <div class="meeting">
        会議状態：
        <el-select v-model="Search.searchbean.meetingStatus" class="selectSet">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="キャンセルされた" value="0"></el-option> </el-select
        >&nbsp; 時間：
        <el-date-picker
          v-model="value1"
          :label-width="formLabelWidth"
          type="daterange"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="開始期日"
          end-placeholder="終了期日"
        ></el-date-picker>
        &nbsp;&nbsp;<el-button type="primary" icon="el-icon-search" @click="searchVisited()">検索</el-button>
        <div style="width: 100%; margin-top: 20px">
          <el-table :data="Searchlist" border :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
            <el-table-column fixed type="index" label="番号" width="50"> </el-table-column>
            <el-table-column fixed prop="mtittle" label="会議のテーマ" width="130">
              <template #default="scope">
                <p style="color: blue; cursor: pointer; width: -webkit-fit-content" @click="openDetail(scope.row.mid, scope.row.mpSureflg, scope.row.mpId)">{{ scope.row.mtittle }}</p>
              </template>
            </el-table-column>
            <el-table-column fixed prop="mrName" label="会議室"> </el-table-column>
            <el-table-column prop="mbTime" label="開始時間" width="180"> </el-table-column>
            <el-table-column prop="meTime" label="終了時間" width="180"> </el-table-column>
            <el-table-column prop="mpType" label="類別">
              <template #default="scope">
                <p v-if="scope.row.mpType == 2" style="color: red">必须参与</p>
                <p v-if="scope.row.mpType == 1">可参与</p>
                <p v-if="scope.row.mpType == 3">可参与</p>
              </template>
            </el-table-column>
            <el-table-column prop="meetingStatus" label="会議状態" width="160">
              <template #default="scope">
                <p v-if="scope.row.meetingStatus == ''">全部</p>
                <p v-if="scope.row.meetingStatus == 1">正常</p>
                <p v-if="scope.row.meetingStatus == 0">キャンセルしました</p>
              </template>
            </el-table-column>
            <el-table-column prop="mpSureflg" label="出欠確認">
              <template #default="scope">
                <p v-if="scope.row.mpSureflg == 1">确认参加</p>
                <p v-if="scope.row.mpSureflg == 0" style="color: red">等待确认</p>
                <p v-if="scope.row.mpSureflg == 2">不参加</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页部分 -->
        <div style="width: 100%; margin: auto">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Search.indexPage"
            :page-size="Search.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <!-- 会议主题弹出框 -->
    <el-dialog title="会議詳細" v-model="visitedDetail" width="40%" :before-close="handleClose" style="margin: auto">
      <div style="width: 100%; height: auto">
        <table class="mytable" cellpadding="0" cellspacing="0">
          <tr class="mytr">
            <td class="mytd">会社名称</td>
            <td class="mytd1">
              {{ visitedTableList.enterpriseName }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">会議室</td>
            <td class="mytd1">
              {{ visitedTableList.mrName }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">会議のテーマ</td>
            <td class="mytd1">
              {{ visitedTableList.mtittle }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">会議説明</td>
            <td class="mytd1">
              {{ visitedTableList.mcontent }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">会議時間</td>
            <td class="mytd1">
              {{ visitedTableList.meetingtime }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">時間帯</td>
            <td class="mytd1">
              {{ visitedTableList.period }}
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">発起人</td>
            <td class="mytd1">
              <el-button style="background-color: #009688; color: #ffffff; margin-bottom: 5px; margin-top: 5px">
                {{ visitedTableList.mpUserName1 }}
              </el-button>
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">参加必要</td>
            <td class="mytd1">
              <el-button
                style="background-color: #009688; color: #ffffff; margin-left: 0px; margin-right: 10px; margin-bottom: 5px; margin-top: 5px"
                v-for="mpUserName2 in visitedTableList.mpUserName2"
                :key="mpUserName2"
                >{{ mpUserName2 }}</el-button
              >
            </td>
          </tr>
          <tr class="mytr">
            <td class="mytd">参加可能</td>
            <td class="mytd1">
              <el-button
                style="background-color: #009688; color: #ffffff; margin-left: 0px; margin-right: 10px; margin-bottom: 5px; margin-top: 5px"
                v-for="mpUserName3 in visitedTableList.mpUserName3"
                :key="mpUserName3"
                >{{ mpUserName3 }}</el-button
              >
            </td>
          </tr>
          <tr class="mytr" v-if="visitedTableList.maid == this.$store.getters.showuserGuid && this.visitedTableList.mpSureremark1 == '1'">
            <td class="mytd">拒绝理由</td>
            <td class="mytd1">
              <div style="height: 50px; overflow-y: auto; padding-top: 6px; padding-bottom: 6px">
                <p v-for="reasons in visitedTableList.reasons" :key="reasons" style="height: 25px; line-height: 25px">{{ reasons.name }}&nbsp;:&nbsp;{{ reasons.reason }}</p>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="日程一覧" v-model="moredialogVisible" custom-class="Schedulebrowse">
      <div class="Schedule">
        <div style="width: 100%">
          <el-table :data="realSearchList" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
            <el-table-column prop="stTittle" label="日程類別" width="90">
              <template #default="scope">
                <div style="color: blue; cursor: pointer" @click="openScheduleClick(scope.row.sid)">{{ scope.row.stTittle }}</div>
              </template></el-table-column
            >
            <el-table-column prop="stittle" label="日程テーマ" width="100"> </el-table-column>
            <el-table-column prop="scontent" label="日程内容"> </el-table-column>
            <el-table-column prop="saddress" label="日程場所"> </el-table-column>
            <el-table-column prop="sbtime" label="開始時間"> </el-table-column>
            <el-table-column prop="setime" label="終了時間"> </el-table-column>
          </el-table>
        </div>
        <!-- 分页部分 -->
        <div style="width: 100%; margin: auto">
          <el-pagination
            @size-change="scheduleHandleSizeChange"
            @current-change="scheduleHandleCurrentChange"
            :current-page="scheduleSearch.indexPage"
            :page-size="scheduleSearch.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入日历组件
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlulgin from '@fullcalendar/timegrid'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarApi: {},
      calendarOptions: {
        //   timeGridPlugin  可显示每日时间段
        locale: 'ja',
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlulgin],

        moreLinkClick: this.moreClick,
        headerToolbar: {
          right: 'prev1,today,next1'
        },
        buttonText: {
          // 设置按钮
          prev1: '前月',
          today: '今月',
          next1: '来月'
        },
        moreLinkContent: function (arg) {
          let args = '+' + arg.num + '  もっと'
          return args
        },
        // 控制一个日期格子可以有几行的数据
        dayMaxEvents: true,
        views: {
          timeGrid: {
            dayMaxEventRows: 3 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        allDaySlot: false,
        eventMaxStack: false,
        timeZone: 'UTC',
        // 这个加上可以移动日程
        // editable: true,
        selectable: true,
        // navLinks: true,
        selectMirror: true,
        // displayEventTime:false,
        displayEventEnd: true, //所有视图显示结束时间
        initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
        eventClick: this.handleEventClick,
        timeFormat: 'H(:mm)',
        // timezone
        // 设置日程
        events: [],
        eventTimeFormat: {
          hour: 'numeric',
          minute: 'numeric',
          // second: 'numeric',
          meridiem: false
        },
        // eventColor: '#f08f00', // 修改日程背景色
        customButtons: {
          prev1: {
            // this overrides the prev button
            text: '前月',
            click: (e) => {
              this.calendarOptions.events = []
              let calendarApi = this.$refs.fullCalendar.getApi()
              calendarApi.prev()
              this.defaultDate = calendarApi.currentData.viewTitle
              console.log(this.defaultDate)
              window.sessionStorage.setItem('topcurrentDay', this.defaultDate)
              this.getElcalder()
            }
          },
          next1: {
            // this overrides the next button
            text: '来月',
            click: (e) => {
              this.calendarOptions.events = []
              let calendarApi = this.$refs.fullCalendar.getApi()
              calendarApi.next() //点击下一天/周
              this.defaultDate = calendarApi.currentData.viewTitle //获取当前视图的时间
              console.log(this.defaultDate)
              window.sessionStorage.setItem('topcurrentDay', this.defaultDate)
              this.getElcalder()
            }
          },
          today: {
            text: '今月',
            click: (e) => {
              console.log(e)
              this.calendarOptions.events = []
              let calendarApi = this.$refs.fullCalendar.getApi()
              calendarApi.today() //点击今天的事件
              this.defaultDate = calendarApi.currentData.viewTitle //获取当前视图的时间
              window.sessionStorage.setItem('topcurrentDay', this.defaultDate)
              this.getElcalder()
            }
          }
        }
      },
      searchDay: {
        groupEnterpriseGuid: this.$store.getters.showentergroup,
        sbdate: '',
        sedate: '',
        userid: this.$store.getters.showuserGuid
      },
      join: {
        mpId: '',
        mpSureflg: '',
        mpSureremark: ''
      },
      dialogVisible: false,
      rcdata: [],
      elcalder: [],
      editForm: {},
      visitedTableList: {
        meetingtime: '',
        period: '',
        mpUserName1: '',
        mpUserName2: [],
        mpUserName3: [],
        mpSureremark1: '',
        reasons: [],
        mpSureflg1: ''
      },
      SearchstTittle: {
        searchbean: {
          stTittle: ''
        },
        indexPage: 1,
        pageSize: 10
      },
      value: new Date(),
      value3: '',
      // 控制新增彈出框顯示
      moredialogVisible: false,
      dialogFormVisible: false,
      visitedDialogVisible: false,
      innerVisible: false,
      formLabelWidth: '120px',
      options2: [],
      options3: [],
      Form: {
        // 集团下企业主键
        groupEnterpriseGuid: '',
        // 日程类别id
        stId: '',
        // 日程主题
        stittle: '',
        // 日程内容
        scontent: '',
        // 日程地点
        saddress: '',
        // 紧急程度
        surgent: '',
        // 开始日期
        sbdate: '',
        // 结束日期
        sedate: '',
        // 开始时间
        sbtime: '',
        // 结束时间
        setime: '',
        // 提醒方式
        sremindType: '1',
        // 提醒时间
        sremindTime: '',
        // 提醒分钟数
        sremindMinute: '0',
        // 登录人的主键
        userid: this.$store.getters.showuserGuid,
        // 抄送人id列表
        ccuserids: []
      },
      rules: {
        groupEnterpriseGuid: [
          {
            required: true,
            message: '会社を選んでください',
            trigger: 'blur'
          }
        ],
        stId: [
          {
            required: true,
            message: '日程類別を選んでください',
            trigger: 'blur'
          }
        ],
        stittle: [
          {
            required: true,
            message: '日程テーマを入力してください',
            trigger: 'blur'
          }
        ],
        scontent: [
          {
            required: true,
            message: '日程内容を入力してください',
            trigger: 'blur'
          }
        ],
        saddress: [
          {
            required: true,
            message: '日程場所を入力してください',
            trigger: 'blur'
          }
        ],
        // ccuserids: [
        //   { required: true, message: '请选择抄送人', trigger: 'change' }
        // ],
        surgent: [
          {
            required: true,
            message: '緊急程度を選んでください',
            trigger: 'blur'
          }
        ],
        sbdate: [
          {
            type: 'date',
            required: true,
            message: '開始期日を選んでください',
            trigger: 'change'
          }
        ],
        sedate: [
          {
            type: 'date',
            required: true,
            message: '終了期日を選んでください',
            trigger: 'change'
          }
        ],
        sbtime: [
          {
            required: true,
            message: '開始時間を選んでください',
            trigger: 'change'
          }
        ],
        setime: [
          {
            required: true,
            message: '終了時間を選んでください',
            trigger: 'change'
          }
        ],
        sremindType: [
          {
            required: true,
            message: 'リマインドの方式を選んでください',
            trigger: 'change'
          }
        ],
        sremindTime: [
          {
            required: true,
            message: 'リマインド時間を選んでください',
            trigger: 'change'
          }
        ]
      },
      // treeData: [],
      // defaultProps: {
      //   children: 'children',
      //   label: 'name'
      // },
      Search: {
        searchbean: {
          meetingStatus: '1',
          beginTime: '',
          endTime: '',
          userinfoGuid: this.$store.getters.showuserGuid
        },
        indexPage: 1,
        pageSize: 8
      },
      scheduleSearch: {
        indexPage: 1,
        pageSize: 8,
        searchbean: {
          flg: '3',
          userid: this.$store.getters.showuserGuid,
          stTittle: '',
          stittle: '',
          groupEnterpriseGuid: this.$store.getters.showentergroup,
          sbdate: '',
          sedate: '',
          stId: ''
        }
      },
      Searchlist: [],
      SearchList: [],
      SearchList1: [],
      realSearchList: [],
      // 会议的总条数
      total: 0,
      // 会议中绑定的开始结束时间
      value1: '',
      // 会议查询数据
      visitedlist: [],
      // 会议主题弹出窗打开关闭
      visitedDetail: false,
      // 会议主题弹出窗表格数据
      visitedTableList: {},
      title: '',
      notice: '',
      visitedTableList: [],
      falgVisitedList: [],
      iconOpenVisitedFlag: false
    }
  },
  created() {
    this.axios
      .post('/notice/listNotice', {
        indexPage: 1,
        pageSize: 3,
        searchbean: {
          insertTime: '',
          title: ''
        }
      })
      .then((res) => {
        console.log(res.data)
        this.title = res.data.data.list[0].title
        this.notice = res.data.data.list[0].noticeCon
        this.Searchid()
        this.getElcalder()
        this.searchVisited()
      })
  },
  mounted() {
    // 获取用户信息
    this.calendarApi = this.$refs.fullCalendar.getApi()
    console.log(this.$refs.fullCalendar.getApi().currentData.viewTitle)
    window.sessionStorage.setItem('topcurrentDay', this.$refs.fullCalendar.getApi().currentData.viewTitle)
  },
  methods: {
    moreClick(day) {
      console.log(day)
      this.scheduleSearch.searchbean.sbdate = this.compleDay(day.date)
      this.scheduleSearch.searchbean.sedate = this.compleDay(day.date) + ' 23:59:59'
      this.scSearch()
      this.moredialogVisible = true
    },
    compleDay(date) {
      let d = new Date(date)
      let m = d.getMonth() + 1
      return d.getFullYear() + '-' + m + '-' + d.getDate()
    },
    scSearch() {
      this.axios.post('/schedule/selectDayInclude', this.scheduleSearch).then((res) => {
        console.log(res)
        this.realSearchList = res.data.data.list
        this.total = res.data.data.total
        this.scheduleSearch.indexPage = 1
      })
    },
    prev() {
      this.calendarApi.prev()
    },
    // 切换下一个按钮事件
    next() {
      this.calendarApi.next()
    },
    // 点击今天按钮
    today() {
      this.calendarApi.today()
    },
    handleEventClick(info) {
      console.log(info.event.id)
      this.axios
        .post('/schedule/select', { sid: info.event.id })
        .then((res) => {
          console.log(res.data)
          this.editForm = res.data.data
          if (this.editForm.surgent === '1') this.editForm.surgent = '一般'
          if (this.editForm.surgent === '2') this.editForm.surgent = '重要'
          if (this.editForm.surgent === '3') this.editForm.surgent = '緊急'
        })
        .catch((err) => {
          console.log(err)
        })
      this.dialogVisible = true
    },
    openScheduleClick(id) {
      this.axios
        .post('/schedule/select', { sid: id })
        .then((res) => {
          console.log(res.data)
          this.editForm = res.data.data
          if (this.editForm.surgent === '1') this.editForm.surgent = '一般'
          if (this.editForm.surgent === '2') this.editForm.surgent = '重要'
          if (this.editForm.surgent === '3') this.editForm.surgent = '緊急'
          if (this.editForm.sremindType === '1') this.editForm.sremindType = 'しない'
          if (this.editForm.sremindType === '2') this.editForm.sremindType = 'メッセージ'
          if (this.editForm.sremindType === '3') this.editForm.sremindType = 'メール'
        })
        .catch((err) => {
          console.log(err)
        })
      this.dialogVisible = true
    },
    // 计算这个月的天数
    getMonthDays(year, month) {
      let monthStartDate = new Date(year, month, 1)
      let monthEndDate = new Date(year, month + 1, 1)
      let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
      return days
    },
    // 獲取日曆日程列表
    getElcalder() {
      // this.randomDay = new Date().getFullYear()
      this.$nextTick(() => {
        this.randomDay = window.sessionStorage.getItem('topcurrentDay').slice(0, 4)
        console.log(this.randomDay)
        if (window.sessionStorage.getItem('topcurrentDay').indexOf('月') - window.sessionStorage.getItem('topcurrentDay').indexOf('年') === 3) {
          this.searchDay.sbdate = this.randomDay + '-' + window.sessionStorage.getItem('topcurrentDay').slice(5, 7) + '-' + '01'
          this.searchDay.sedate =
            this.randomDay +
            '-' +
            window.sessionStorage.getItem('topcurrentDay').slice(5, 7) +
            '-' +
            this.getMonthDays(this.randomDay, window.sessionStorage.getItem('topcurrentDay').slice(5, 7) - 1) +
            ' 23:59:59'
        } else {
          this.searchDay.sbdate = this.randomDay + '-' + window.sessionStorage.getItem('topcurrentDay').slice(5, 6) + '-' + '01'

          this.searchDay.sedate =
            this.randomDay +
            '-' +
            window.sessionStorage.getItem('topcurrentDay').slice(5, 6) +
            '-' +
            this.getMonthDays(this.randomDay, window.sessionStorage.getItem('topcurrentDay').slice(5, 6) - 1) +
            ' 23:59:59'
        }
        console.log(this.searchDay)
        this.axios
          .post('/schedule/selectAll', this.searchDay)
          .then((res) => {
            console.log(res)
            this.elcalder = res.data.data
            console.log(this.elcalder)
            res.data.data.forEach((item) => {
              if (item.surgent === '1')
                this.calendarOptions.events.push({
                  id: item.sid,
                  title: item.stittle,
                  stTittle: item.stTittle,
                  start: item.sbtime,
                  end: item.setime,
                  scontent: item.scontent,
                  saddress: item.saddress,
                  surgent: item.surgent,
                  sremindType: item.sremindType,
                  sremindTime: item.sremindTime,
                  sremindMinute: item.sremindMinute,
                  color: '#67c23a'
                })
              else if (item.surgent === '2')
                this.calendarOptions.events.push({
                  id: item.sid,
                  title: item.stittle,
                  stTittle: item.stTittle,
                  start: item.sbtime,
                  end: item.setime,
                  scontent: item.scontent,
                  saddress: item.saddress,
                  surgent: item.surgent,
                  sremindType: item.sremindType,
                  sremindTime: item.sremindTime,
                  sremindMinute: item.sremindMinute,
                  color: '#f08f00'
                })
              else if (item.surgent === '3')
                this.calendarOptions.events.push({
                  id: item.sid,
                  title: item.stittle,
                  stTittle: item.stTittle,
                  start: item.sbtime,
                  end: item.setime,
                  scontent: item.scontent,
                  saddress: item.saddress,
                  surgent: item.surgent,
                  sremindType: item.sremindType,
                  sremindTime: item.sremindTime,
                  sremindMinute: item.sremindMinute,
                  color: 'red'
                })
            })
          })
          .catch((err) => {
            console.log(err)
          })
      })
    },
    handleClose(done) {
      this.value1 = ''
      this.iconOpenVisitedFlag = false
      done()
    },
    // 退出功能
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 检索企业id
    Searchid() {
      function id(value, label) {
        this.value = value
        this.label = label
      }

      this.axios
        .post('/role/selectAllEnterprise')
        .then((res) => {
          res.data.data.forEach((item) => {
            this.options3.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
          })
        })
        .catch((error) => {
          console.log(error)
        })
      this.axios
        .post('/scheduletype/select/list', this.SearchstTittle)
        .then((res) => {
          res.data.data.list.forEach((item) => {
            this.options2.push(new id(item.stId, item.stTittle))
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },
    searchVisited() {
      // if (this.value1 != '' && this.value1 != null) {
      //   this.Search.searchbean.beginTime = this.value1[0]
      //   this.Search.searchbean.endTime = this.value1[1]
      // } else if (this.value1 == ''  || this.value1 == null) {
      //   var date = new Date()
      //   var year = date.getFullYear()
      //   var month = (date.getMonth() + 1 + "").padStart(2, "0");
      //   var day = (date.getDate() + "").padStart(2, "0");
      //   // var year = date.getFullYear()
      //   this.Search.searchbean.beginTime = year+'-'+month+'-'+day
      //   this.Search.searchbean.endTime = ''
      // }
      // if (type == '1') {
      //   let date = new Date()
      //   let year = date.getFullYear()
      //   let month = (date.getMonth() + 1 + '').padStart(2, '0')
      //   let day = (date.getDate() + '').padStart(2, '0')
      //   this.Search.searchbean.beginTime = year + '-' + month + '-' + day
      //   this.Search.searchbean.endTime = year + '-' + month + '-' + day
      // } else {
      console.log(this.value1)
      if (this.value1 != null && this.value1.length > 0) {
        this.Search.searchbean.beginTime = this.value1[0]
        this.Search.searchbean.endTime = this.value1[1]
      } else {
        var date = new Date()
        var year = date.getFullYear()
        var month = (date.getMonth() + 1 + '').padStart(2, '0')
        var day = (date.getDate() + '').padStart(2, '0')
        // var year = date.getFullYear()
        this.Search.searchbean.beginTime = year + '-' + month + '-' + day
        this.Search.searchbean.endTime = ''
      }
      // }
      if (this.visitedDialogVisible === true) {
        this.iconOpenVisitedFlag = true
      }
      if (this.iconOpenVisitedFlag === true)
        this.axios
          .post('/meetingpersons/select/list/byid', this.Search)
          .then((res) => {
            console.log(res)
            this.Searchlist = res.data.data.list
            this.total = res.data.data.total
          })
          .catch((err) => {
            console.log(err)
          })
      else {
        let date = new Date()
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        this.Search.searchbean.beginTime = year + '-' + month + '-' + day
        this.Search.searchbean.endTime = year + '-' + month + '-' + day
        this.axios
          .post('/meetingpersons/select/list/byid', this.Search)
          .then((res) => {
            this.falgVisitedList = res.data.data.list
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.Search.pageSize = newSize
      this.searchVisited()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.searchVisited()
    },
    // 监听 pagesize 改变的事件
    scheduleHandleSizeChange(newSize) {
      // console.log(newSize)
      this.scheduleSearch.pageSize = newSize
      this.scSearch()
    },
    // 监听 页码值 改变的事件
    scheduleHandleCurrentChange(newPage) {
      console.log(newPage)
      this.scheduleSearch.indexPage = newPage
      this.scSearch()
    },
    // 打开会议主题窗口
    openDetail(Id, mpSureflg, Pid) {
      console.log(Id)
      console.log(Pid)
      this.axios
        .put('/meetingpersons/update/read', {
          mpId: Pid
        })
        .then((res) => {
          console.log(res)
          this.$emit('func')
        })
        .catch((error) => {
          console.log(error)
        })
      this.visitedDetail = true
      console.log(this.visitedDetail)
      this.axios
        .post('/meeting/select', {
          mid: Id
        })
        .then((res) => {
          this.visitedTableList = res.data.data
          this.visitedTableList.meetingtime = res.data.data.mbtime.substring(0, 10)
          this.visitedTableList.period = res.data.data.mbtime.substring(11, 19) + '-' + res.data.data.metime.substring(11, 19)
          this.visitedTableList.mpUserName2 = []
          this.visitedTableList.mpUserName3 = []
          this.visitedTableList.reasons = []
          this.visitedTableList.mpSureremark1 = '0'

          for (var i = 0; i < res.data.data.meetingpersonsVos.length; i++) {
            if (res.data.data.meetingpersonsVos[i].mpType == 1) {
              this.visitedTableList.mpUserName1 = res.data.data.meetingpersonsVos[i].mpUserName
            }
            if (res.data.data.meetingpersonsVos[i].mpType == 2) {
              this.visitedTableList.mpUserName2.push(res.data.data.meetingpersonsVos[i].mpUserName)
            }
            if (res.data.data.meetingpersonsVos[i].mpType == 3) {
              this.visitedTableList.mpUserName3.push(res.data.data.meetingpersonsVos[i].mpUserName)
            }
            if (
              (res.data.data.meetingpersonsVos[i].mpType == 2 || res.data.data.meetingpersonsVos[i].mpType == 3) &&
              res.data.data.meetingpersonsVos[i].mpSureremark != '' &&
              res.data.data.meetingpersonsVos[i].mpSureremark != null
            ) {
              this.visitedTableList.reasons.push({
                name: res.data.data.meetingpersonsVos[i].mpUserName,
                reason: res.data.data.meetingpersonsVos[i].mpSureremark
              })
              this.visitedTableList.mpSureremark1 = '1'
            } else if ((res.data.data.meetingpersonsVos[i].mpType == 2 || res.data.data.meetingpersonsVos[i].mpType == 3) && res.data.data.meetingpersonsVos[i].mpSureremark == null) {
              this.visitedTableList.reasons.push({
                name: res.data.data.meetingpersonsVos[i].mpUserName,
                reason: '未確認'
              })
              this.visitedTableList.mpSureremark1 = '1'
            }
            if (res.data.data.meetingpersonsVos[i].userinfoGuid == this.$store.getters.showuserGuid) {
              this.join.mpId = res.data.data.meetingpersonsVos[i].mpId
            }
          }
          console.log(this.visitedTableList.mpUserName1)
          this.visitedTableList.mpSureflg1 = mpSureflg
          console.log(this.visitedTableList.mpSureflg1)
          console.log(this.visitedTableList.reasons)
          console.log(this.visitedTableList.meetingpersonsVos)
          console.log(this.visitedTableList.mpSureremark1)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    submitForm() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          console.log(this.Form)
          if (this.Form.sbdate > this.Form.sedate || this.Form.sbtime > this.Form.setime) return this.$message.warning('開始時間が終了時間を超えた')
          this.axios
            .post('/schedule/insert', this.Form)
            .then((res) => {
              if (res.data.success) {
                this.$message.success(this.$getMsg('I0001'))
                this.$refs.Form.resetFields()
                this.dialogFormVisible = false
                this.calendarOptions.events = []
                this.getElcalder()
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    resetForm(formName) {
      //重置form表单 フォームをリセット
      this.$refs[formName].resetFields()
    },
    mySearch() {
      this.iconOpenVisitedFlag = true
      this.searchVisited()
      this.visitedDialogVisible = true
    }
  }
}
</script>

<style scoped>
.btn {
  margin-top: 0;
  margin-right: 0;
}

.el-col div {
  background-color: #fff;
}

.col1 {
  flex: 5;
  height: 570px;
}

.col2 {
  flex: 2.5;
  height: 570px;
}

.col {
  line-height: 40px;
  flex: 2;
  height: 40px;
}

.col3 {
  line-height: 40px;
  flex: 1;
  height: 40px;
}

.col3 .bgccol3 {
  height: 40px;
  background-color: #fff !important;
}

/* 新增日程弹出框 */
.topForm .el-form-item {
  margin-left: 0px;
  margin-right: 50px;
}

.topForm .el-select {
  width: 100%;
}

.topForm textarea {
  height: 60px !important;
}

.ab {
  width: 160px !important;
}

.fdate {
  position: relative;
  /* left: 260px; */
  bottom: 62px;
}

.ftime {
  position: relative;
  left: 250px;
  bottom: 127px;
}

.re {
  position: relative;
  left: 0px;
  bottom: 124px;
}

.save1 {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}

/* 会议详细  */
.el-table {
  height: 80% !important;
}

#children_container .mytr {
  border: 1px solid #929292 !important;
}

#children_container .mytd {
  width: 120px;
  text-align: right !important;
  padding-right: 10px !important;
  border: 1px solid #929292 !important;
  background: #e6e6e6;
}

#children_container .mytd1 {
  border: 1px solid #929292 !important;
  padding-left: 20px;
}

#children_container .mytable {
  width: 100%;
}

.selectSet {
  width: 160px !important;
}

.timepickerSet {
  width: 155px !important;
}

:deep(.el-calendar-day) {
  box-sizing: border-box;
  padding: 5px;
  height: 80px;
}

/* 日历日程弹出框 */
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.clickColor {
  color: blue;
}
.is-selected {
  color: orange;
  margin-top: 5px;
  overflow: hidden !important;
}

.is-success {
  color: #67c23a;
}

.is-danger {
  color: #f56c6c;
}

.is-common {
  color: #909399;
}

.txt .el-textarea__inner {
  height: 100px !important;
}

.form .el-form-item__label {
  margin-right: 20px !important;
  margin-left: 50px;
}

.form .theme .el-form-item__label {
  margin-right: 7px !important;
}

.mytd1 .el-button {
  margin-left: 0;
}

#children_container .save {
  position: relative;
  left: 310px;
  bottom: 0px;
}

#children_container .dialog_detail {
  width: 420px;
}

#children_container .dialog_detail1 {
  width: 160px !important;
}

#children_container .el-dialog {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
}

#children_container .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  content: '';
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 252px;
}

:deep(.el-range-editor--medium.el-input__inner) {
  width: 310px;
}

:deep(.el-form-item__error) {
  width: 100%;
}

:deep(.el-table--border .el-table__cell:first-child .cell) {
  text-align: center;
}

:deep(.el-form-item__label) {
  width: 180px !important;
}

:deep(#timewidth .el-form-item__label) {
  width: 70px !important;
}
.meeting {
  width: 100%;
  height: 510px;
}
:deep(.joinmeeting) {
  width: 42%;
}
.Schedule {
  width: 100%;
  height: 430px;
}
:deep(.Schedulebrowse) {
  width: 57%;
}
.col2Height {
  background: white;
  height: 345px;
  padding: 10px;
}
.col2Height1 {
  background: white;
  height: 345px;
  padding: 10px;
  overflow: auto;
}
:deep(.fc .fc-button-primary:focus) {
  box-shadow: unset;
}
:deep(.fc .fc-button-primary:not(:disabled):active:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus) {
  box-shadow: unset;
}
/* .fc-view-harness {
  height: 800px;
}
.fullCaldarSet {
  height: 730px;
} */
:deep(.fullCaldarSet.fc.fc-media-screen.fc-direction-ltr.fc-theme-standard) {
  height: 600px;
}
:deep(.fc .fc-toolbar.fc-header-toolbar) {
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
}
:deep(.fc-toolbar-chunk) {
  height: 34px;
}
:deep(.fc .fc-scrollgrid-liquid) {
  width: 730px;
  height: 500px;
  margin: auto;
}
:deep(.fc-col-header) {
  width: 730px;
}
:deep(.fc .fc-daygrid-day.fc-day-today) {
  background-color: #f2f8fe;
}
:deep(.fc .fc-highlight) {
  background: rgba(131 234 255 / 30%);
}
:deep(.fc-scrollgrid-sync-table .fc-daygrid-day) {
  height: 50px;
}
/* :deep(.fc .fc-scrollgrid-liquid){
      height: 90%;
      width: 94%;
      margin: auto;
} */
/* :deep(.fc-popover) {
  left: -10000000px !important;
  top: -10000000000000px !important;
} */
:deep(.fc-popover.fc-more-popover) {
  display: none;
}
:deep(.fc-daygrid-more-link.fc-more-link) {
  background-color: #f2f8fe;
  color: red;
}
:deep(.fc-daygrid-event-harness){
  cursor:pointer;
}
</style>
